<template>
	<div class="wrapper">
		<!--header部分-->
		<header>
			<div class="back" @click="toIntegral">
			<i class="fa fa-chevron-left"></i>
			</div>
			<div class="text">全部明细</div>
		</header>
		<ul>
		    <li v-for="item in creditArr">
		        <div class="left">
		            <div class="type">{{item.type|typeFilter}}</div>
		            <div class="date">
		                {{item.create_time}}</div>
		        </div>
		        <div class="right" v-if="item.type==1">
		            <div class="amount">+{{item.credit}}</div>
		        </div>
				<div class="right" v-if="item.type==2">
				    <div class="amount">-{{item.credit}}</div>
				</div>
		    </li>
		</ul>
	</div>
</template>

<script>
	export default {
	name: 'creditDetail',
		data(){
			return {
				
				user: {},
				creditArr:[],
			}
		},
		created(){
			this.user = this.$getSessionStorage('user');
			
			this.$axios.post('CreditController/listByUserId',this.$qs.stringify({
				userId:this.user.userId,
			})).then(response=>{
				this.creditArr=response.data;
			}).catch(error => {
				console.error(error);
			});
		},
		filters: {
		    typeFilter(value) {
		        if(value==1){
					return '获取';
				}
				else if(value==2){
					return '使用';
				}
		    }
		},
		methods: {
			
			
			toIntegral() {
				this.$router.push({
					path: '/integral'
				});
			},
			
			
		}
	}
	
</script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
		background-color: azure;
	}
	/****************** header ******************/
	.wrapper header{
		width: 100%;
		height: 12vw;
		background-color: #FFF;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 1vw;
		position: fixed;
		left: 0;
		top: 0;
	}
	.wrapper header .back{
		font-size: 4vw;
		margin-left: 2vw;
		margin-right: 2vw;
	}
	.wrapper header .text{
		font-size: 4vw;
	}
	
	.wrapper ul {
	    width: 100%;
	    margin-top: 12vw;
	    
	}
	
	.wrapper ul li {
	    width: 100%;
	    height: 12vw;
		background-color: #FFF;
		display: flex;
		border-bottom: solid 1px #DDD;
		
	}
	.wrapper ul li .left{
		width: 50%;
		height: 12vw;
		
	}
	.wrapper ul li .left .type{
		width:50%;
		height: 6vw;
		display: flex;
		justify-content: flex-start;
		margin-left: 2vw;
		align-items: center;
	}
	.wrapper ul li .left .date{
		width:50%;
		height: 6vw;
		display: flex;
		justify-content: flex-start;
		margin-left: 2vw;
		align-items: center;
		font-size: 2vw;
	}
	.wrapper ul li .right{
		width: 50%;
		display: flex;
		justify-content: flex-end;
		margin-right: 2vw;
		align-items: center;
	}
</style>
